import React, { useEffect, useState } from 'react';
import { Overlay } from 'react-vant';
import QRCode from 'qrcode.react';
import "./index.css"

import { getUserNames } from "../../api/userName"
export default function QRCodeAlert() {
    const [visible, setVisible] = useState(false);
    const [username, setName] = useState(getUserNames);

    useEffect(() => {
        setTimeout(() => {

        })
        getUserNames().then((res) => {
            setName(res[0])
        })
    }, [])
    console.log(username)
    setInterval(() => {
      
        username.birthday = new Date()
        setName(username)
        
    }, 30000)
    console.log(username)
    return (
        <div className='QRcode-box'>

            <span className="iconfont" onClick={() => setVisible(true)}>&#xe617;</span>
            <Overlay visible={visible}
                style={{
                    height: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                }}>
                <div style={{ width: 300, height: 340, backgroundColor: '#fff', borderRadius: 14, textAlign: 'center' }} >
                    <div className='QRcode-content'>
                        <span className='QRcode-concel' onClick={() => setVisible(false)}>×</span>
                        <p className='QRcode-name'>
                            {username.name}
                        </p>
                        <p className='QRcode-explain'>
                            会员码每30秒自动刷新
                        </p>
                        <div className='QRcode-update' >

                            <QRCode
                                id="qrCode"
                                value={username.birthday}
                                size={150} // 二维码的大小
                                fgColor="#000000" // 二维码的颜色
                                style={{ margin: 'auto', border: "1px solid #E3E3E3", padding: "20px" }}
                            />

                        </div>
                    </div>
                </div>
            </Overlay>
        </div>
    )
}

